<!--  -->
<template>
  <q-page class="q-px-xs">
    <q-splitter :model-value="200" unit="px" :horizontal="$q.screen.xs">
      <template #before>
        <q-input v-model="treeFilter" debounce="300" dense hide-bottom-space label="模糊搜索" />
        <q-tree
          v-model:selected="query.mBuildingId"
          v-model:expanded="treeExpanded"
          :nodes="treeOptions"
          :filter="treeFilter"
          node-key="buildingId"
          label-key="buildingName"
          @update:selected="handleQuery"
        />
      </template>

      <template #after>
        <!-- 查询操作 -->
        <q-toolbar>
          <table-filter :model-value="query" @change="handleQuery" />
          <q-space />
          <q-btn icon="plus" color="primary" @click="handleAdd()">新增</q-btn>
          <q-btn icon="plus" color="secondary" class="q-ml-sm" @click="handleImport()">导入</q-btn>
          <q-btn icon="delete" color="error" :disable="!hasSelected" class="q-mx-sm" @click="handleDelete()">删除</q-btn>
          <q-btn icon="excel" color="warning" :loading="exportLoading" @click="handleExport">导出</q-btn>
        </q-toolbar>

        <!-- 数据表格 -->
        <q-table :columns="columns" selection="multiple" v-bind="tableOptions">
          <template #body-cell-action="props">
            <q-td :props="props">
              <q-btn round flat icon="edit" color="primary" @click="handleEdit(props.row.roomId)" />
              <q-btn round flat icon="delete" color="error" @click="handleDelete(props.row.roomId)" />
            </q-td>
          </template>
        </q-table>
      </template>
    </q-splitter>
    <!-- 表单窗口 -->
    <q-dialog v-model="dialog" persistent>
      <room-form :id="roomId" :title="title" @close="closeDialog" @after-save="handleQuery" />
    </q-dialog>
  </q-page>
</template>

<script lang="ts" setup>
  import { onMounted } from 'vue';
  import { usePageQuery, useTable, useCrudList, useFormDialog } from 'src/composables';

  import crudApi from 'src/api/community/room';
  import RoomForm from './RoomForm.vue';
  import { ref } from 'vue';
  import { BuildingDto, getBuildingTree } from 'src/api/community/building';

  // 定义组件名
  defineOptions({ name: 'Room' });

  // 查询条件
  const query = usePageQuery({ mBuildingId: '' });

  // 表格数据
  const { tc } = useTable();
  const { tableOptions, handleQuery, hasSelected, handleDelete, exportLoading, handleExport } = useCrudList(crudApi, query, 'roomId');
  const columns = [
    tc('areaName', '小区名称', 150),
    tc('roomCode', '完整房号', 100),
    tc('roomUsageName', '房间用途', 100),
    tc('roomTypeName', '房间户型', 100),
    tc('roomStateName', '房间状态', 100),
    tc('roomDecoName', '装修情况', 100),
    tc('buildArea', '建筑面积', 90),
    tc('usageArea', '使用面积', 90),

    tc('action', '操作', 0, { style: 'min-width:120px' }),
  ];
  onMounted(handleQuery);

  const treeFilter = ref('');
  const treeOptions = ref<BuildingDto[]>([]);
  const treeExpanded = ref<IdType[]>([0]);
  onMounted(() => {
    getBuildingTree().then((data) => {
      treeOptions.value = data;
      data.forEach((t) => {
        treeExpanded.value.push(t.buildingId);
        t.children.forEach((c) => treeExpanded.value.push(c.buildingId));
      });
    });
    handleQuery();
  });

  function handleImport() {
    console.log('import');
  }
  // 表单窗口
  const { dialog, title, id: roomId, handleAdd, handleEdit, closeDialog } = useFormDialog('');
</script>

<style lang="scss" scoped></style>
